<template>
  <!-- <div class="content" style="width: 100%; height: 100%; margin: 0 auto"> -->
  <div ref="chartsDom" style="width: 100%; height: 100%; margin: 0 auto"></div>
  <!-- </div> -->
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch } from "vue";
import * as echarts from "echarts";
import { centerMapOption } from "../intelligence/chartOption";
import china from "../../../assets/json/china.json";
let props = defineProps({
  mapData: {
    type: Object,
  },
});
let chartsInstace = null;
let chartsDom = ref(null);
const points = ref([
  // 散点图数据
  {
    name: "新疆",
    value: [87.628579, 43.793301],
    itemStyle: { color: "#00EEFF" },
  }, // 新疆
  {
    name: "四川",
    value: [104.076452, 30.651696],
    itemStyle: { color: "#00EEFF" },
  }, // 四川
  {
    name: "甘肃",
    value: [103.826777, 36.060634],
    itemStyle: { color: "#00EEFF" },
  }, // 甘肃
  {
    name: "云南",
    value: [102.709372, 25.046432],
    itemStyle: { color: "#00EEFF" },
  }, // 云南
  {
    name: "广西",
    value: [108.327537, 22.816659],
    itemStyle: { color: "#00EEFF" },
  }, // 广西
  {
    name: "湖南",
    value: [112.982951, 28.116007],
    itemStyle: { color: "#00EEFF" },
  }, // 湖南
  {
    name: "山东",
    value: [117.020725, 36.670201],
    itemStyle: { color: "#00EEFF" },
  }, // 山东
  {
    name: "河南",
    value: [113.753094, 34.767052],
    itemStyle: { color: "#00EEFF" },
  }, // 河南
  {
    name: "山西",
    value: [112.578781, 37.813948],
    itemStyle: { color: "#00EEFF" },
  }, // 山西
  {
    name: "福建",
    value: [119.296194, 26.101082],
    itemStyle: { color: "#00EEFF" },
  }, // 福建
  {
    name: "浙江",
    value: [120.152575, 30.266619],
    itemStyle: { color: "#00EEFF" },
  }, // 浙江
  {
    name: "江苏",
    value: [118.763563, 32.061377],
    itemStyle: { color: "#00EEFF" },
  }, // 江苏
  {
    name: "北京",
    value: [116.407387, 39.904179],
    itemStyle: { color: "#A6283F" },
  }, // 北京
  {
    name: "陕西",
    value: [108.953939, 34.266611],
    itemStyle: { color: "#00EEFF" },
  }, // 陕西
  {
    name: "广东",
    value: [113.266887, 23.133306],
    itemStyle: { color: "#00EEFF" },
  }, // 广东
]);
const linesData = ref([
  {
    coords: [
      [116.407387, 39.904179],
      [87.628579, 43.793301],
    ],
  }, // 北京->新疆
  {
    coords: [
      [116.407387, 39.904179],
      [104.076452, 30.651696],
    ],
  }, // 北京->四川
  {
    coords: [
      [116.407387, 39.904179],
      [103.826777, 36.060634],
    ],
  }, // 北京->甘肃
  {
    coords: [
      [116.407387, 39.904179],
      [102.709372, 25.046432],
    ],
  }, // 北京->云南
  {
    coords: [
      [116.407387, 39.904179],
      [108.327537, 22.816659],
    ],
  }, // 北京->广西
  {
    coords: [
      [116.407387, 39.904179],
      [112.982951, 28.116007],
    ],
  }, // 北京->湖南
  {
    coords: [
      [116.407387, 39.904179],
      [117.020725, 36.670201],
    ],
  }, // 北京->山东
  {
    coords: [
      [116.407387, 39.904179],
      [113.753094, 34.767052],
    ],
  }, // 北京->河南
  {
    coords: [
      [116.407387, 39.904179],
      [112.578781, 37.813948],
    ],
  }, // 北京->山西
  {
    coords: [
      [116.407387, 39.904179],
      [119.296194, 26.101082],
    ],
  }, // 北京->福建
  {
    coords: [
      [116.407387, 39.904179],
      [120.152575, 30.266619],
    ],
  }, // 北京->浙江
  {
    coords: [
      [116.407387, 39.904179],
      [118.763563, 32.061377],
    ],
  }, // 北京->安徽
  {
    coords: [
      [116.407387, 39.904179],
      [113.266887, 23.133306],
    ],
  }, // 北京->广东
  {
    coords: [
      [87.628579, 43.793301],
      [108.953939, 34.266611],
    ],
  }, // 新疆->陕西
]);

onMounted(() => {
  // getCurrentInstance().refs.charts 获取charts节点对象
  chartsInstace = echarts.init(chartsDom);
  initCharts();
});
watch(
  () => props.mapData,
  () => {
    console.log("不走??????");
    initCharts();
  },
  {
    deep: true,
  }
);
function initCharts() {
  const option = centerMapOption;
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap("china", china);
  option.series[0].data = props.mapData.pointsData;
  option.series[1].data = props.mapData.linesData;
  console.log("==========", option);
  chartsInstace.setOption(option);
}
</script>
<style scoped>
.content {
  background-color: #0e2152;
  height: 100%;
}
</style>
